<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/detail/peoplecenter.css">
    <link rel="stylesheet" href="../../css/datepicker.css">
    <script src="../../js/jquery-2.2.4.min.js"></script>
    <script src="../../js/template-native.js"></script>
    <script src="../../js/datepicker.all.min.js"></script>
    <script src="../../js/moment.min.js"></script>
</head>
<body>
     <div class="container bg-color-bg">
        <div class="top-title">
                <div class="system">
                        <a class="goback-sys bg-color-bg">
                           <img src="../../img/system/back.png" alt="">  
                        </a>
                        <a class="gonext-sys bg-color-bg">
                            <img src="../../img/system/setting.png" alt="">  
                        </a>
                </div>
        </div>
        <div class="people-content">
            <div class="p-p-p">
                <div class="classIntru">
                        <i>班</i>
                        <i>组</i>
                        <i>成</i>
                        <i>员</i>
                 </div>
                 <div class="m-m-person bg-color-border">
                    <div class="m-m-clc">
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                        <div class="pre-item">
                            <div class="pre-top">
                                <div class="pre-name">张震华</div>
                                <div class="p-j-job">班长</div>
                            </div>
                            <div class="imgIcon">
                                <img src="../../img/01/1.png" alt="">
                            </div>
                        </div>
                    </div>        
                 </div>
            </div>
        </div>
         <!--个性化设置弹出窗-->
        <div class="diago" style="display: none;">
            <div class="diado-content diago-active">
                <div class="diago-title">
                    <div class="diago-left">个性化设置</div>
                    <div class="diago-close"></div>
                </div>
                <div class="model-content">
                    <div class="model-list">
                        <ul class="clearfix">
                            <li class="active">
                                <div class="modelDiv">
                                    <p>模板一</p>
                                    <span class="modelSpan"></span>
                                </div>
                            </li>
                            <li>
                                <div class="modelDiv">
                                    <p>模板二</p>
                                    <span class="modelSpan"></span>
                                </div>
                            </li>
                            <li>
                                <div class="modelDiv">
                                    <p>模板三</p>
                                    <span class="modelSpan"></span>
                                </div>
                            </li>
                            <li>
                                <div class="modelDiv">
                                    <p>模板四</p>
                                    <span class="modelSpan"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="diago-bottom">
                    <div class="totrue">确定</div>
                    <div class="cancel">取消</div>
                </div>
                <div class="choose">

                </div>
            </div>
        </div>

         <!--简介编辑弹出窗-->
         <div class="diago">
             <div class="diado-content diago-active">
                 <div class="diago-title">
                     <div class="diago-left">简介编辑</div>
                     <div class="diago-close"></div>
                 </div>
                 <div class="model-content">
                    <div class="editCon">
                        <h3>班组简介内容</h3>
                        <div class="editDiv">
                            <textarea placeholder="请输入班组简介内容"></textarea>
                        </div>
                        <h3>编辑时间</h3>
                        <div class="editDiv c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day">
                            <input placeholder="" autocomplete="off" name="" class="c-datepicker-data-input only-date">
                        </div>
                    </div>
                 </div>
                 <div class="diago-bottom">
                     <div class="totrue">确定</div>
                     <div class="cancel">取消</div>
                 </div>
                 <div class="choose">

                 </div>
             </div>
         </div>
     </div>
     <script>
         var arrbg = ['blue','red','orange'];  //背景框
         var crrbg = ['bbg','obg','ybg'];//背景
         var colorarr = ['#101358','#f7bea0','#9b9b9d'];
         var fontsize = ['#333','#333'] 
         var fontsize1 = ['#999',"#666"]
         $(".m-m-person").css('background','url(../../img/detail/1/'+arrbg[2]+'.png)no-repeat 0 -10px');
         $('.pre-top').css('backgroundColor',colorarr[2]);
         $(".goback-sys").css('backgroundColor','#234def');
         $(".gonext-sys").css('backgroundColor','#234def');
         $(".bg-color-bg").css({'background':'url(../../img/detail/1/'+crrbg[2]+'.jpg)no-repeat 0 0','backgroundSize':'cover'})
         $(".pre-name").css('color',fontsize[1]);
         $(".p-j-job").css('color',fontsize1[1]);
         $('.model-list ul li').click(function () {
             $(this).addClass('active').siblings().removeClass('active')
         })
     </script>
     <script type="text/javascript">
         $(function(){
             var DATAPICKERAPI = {
                 // 默认input显示当前月,自己获取后填充
                 activeMonthRange: function () {
                     return {
                         begin: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
                         end: moment().set({ 'hour': 23, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
                     }
                 },
                 shortcutMonth: function () {
                     // 当月
                     var nowDay = moment().get('date');
                     var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
                     var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
                     return {
                         now: '-' + nowDay + ',0',
                         prev: '-' + prevMonthDay + ',-' + nowDay
                     }
                 },
                 // 注意为函数：快捷选项option:只能同一个月份内的
                 rangeMonthShortcutOption1: function () {
                     var result = DATAPICKERAPI.shortcutMonth();
                     return [{
                         name: '昨天',
                         day: '-1,-1',
                         time: '00:00:00,23:59:59'
                     }, {
                         name: '这一月',
                         day: result.now,
                         time: '00:00:00,'
                     }, {
                         name: '上一月',
                         day: result.prev,
                         time: '00:00:00,23:59:59'
                     }];
                 },
                 // 快捷选项option
                 rangeShortcutOption1: [{
                     name: '最近一周',
                     day: '-7,0'
                 }, {
                     name: '最近一个月',
                     day: '-30,0'
                 }, {
                     name: '最近三个月',
                     day: '-90, 0'
                 }],
                 singleShortcutOptions1: [{
                     name: '今天',
                     day: '0'
                 }, {
                     name: '昨天',
                     day: '-1',
                     time: '00:00:00'
                 }, {
                     name: '一周前',
                     day: '-7'
                 }]
             };
             //十分秒年月日单个
             $('.J-datepicker').datePicker({
                 hasShortcut:true,
                 min:'2018-01-01 04:00:00',
                 max:'2019-04-29 20:59:59',
                 shortcutOptions:[{
                     name: '今天',
                     day: '0'
                 }, {
                     name: '昨天',
                     day: '-1',
                     time: '00:00:00'
                 }, {
                     name: '一周前',
                     day: '-7'
                 }],
                 hide:function(){
                     console.info(this)
                 }
             });

             //年月日单个
             $('.J-datepicker-day').datePicker({
                 hasShortcut: true,
                 format:'YYYY-MM-DD',
                 shortcutOptions: [{
                     name: '今天',
                     day: '0'
                 }, {
                     name: '昨天',
                     day: '-1'
                 }, {
                     name: '一周前',
                     day: '-7'
                 }]
             });

             //年月日范围
             $('.J-datepicker-range-day').datePicker({
                 hasShortcut: true,
                 format: 'YYYY-MM-DD',
                 isRange: true,
                 shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
             });

             //十分年月日单个
             $('.J-datepickerTime-single').datePicker({
                 format: 'YYYY-MM-DD HH:mm'
             });

             //十分年月日范围
             $('.J-datepickerTime-range').datePicker({
                 format: 'YYYY-MM-DD HH:mm',
                 isRange: true
             });

             //十分秒年月日范围，包含最大最小值
             $('.J-datepicker-range').datePicker({
                 hasShortcut: true,
                 min: '2018-01-01 06:00:00',
                 max: '2019-04-29 20:59:59',
                 isRange: true,
                 shortcutOptions: [{
                     name: '昨天',
                     day: '-1,-1',
                     time: '00:00:00,23:59:59'
                 },{
                     name: '最近一周',
                     day: '-7,0',
                     time:'00:00:00,'
                 }, {
                     name: '最近一个月',
                     day: '-30,0',
                     time: '00:00:00,'
                 }, {
                     name: '最近三个月',
                     day: '-90, 0',
                     time: '00:00:00,'
                 }],
                 hide: function () {
                     console.info(this.$input.eq(0).val(), this.$input.eq(1).val())
                 }
             });
             //十分秒年月日范围，限制只能选择同一月，比如2018-10-01到2018-10-30
             $('.J-datepicker-range-betweenMonth').datePicker({
                 isRange: true,
                 between:'month',
                 hasShortcut: true,
                 shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1()
             });

             //十分秒年月日范围，限制开始结束相隔天数小于30天
             $('.J-datepicker-range-between30').datePicker({
                 isRange: true,
                 between: 30
             });

             //年月单个
             $('.J-yearMonthPicker-single').datePicker({
                 format: 'YYYY-MM',
                 min: '2018-01',
                 max: '2019-04'
             });

             //选择年
             $('.J-yearPicker-single').datePicker({
                 format: 'YYYY',
                 min: '2018',
                 max: '2020'
             });


         });
     </script>
</body>
</html>